<template>
  <div style="width: 100%">
    <router-view :data="data"></router-view>
  </div>
</template>

<script>
export default {
  name: 'PrintPage',
  data() {
    return {
      data: {},
    }
  },
  mounted() {
    window.parent.postMessage(
      JSON.stringify({
        type: 'PrintPage:start',
      }),
      '*'
    )
    window.addEventListener('message', this.message, false)
  },
  beforeDestroy() {
    window.removeEventListener('message', this.message, false)
  },
  methods: {
    message(event) {
      const data =
        typeof event.data === 'string' ? JSON.parse(event.data) : event.data
      if (data.type === 'PrintPanel:data') {
        this.data = data.data
        window.parent.postMessage(
          JSON.stringify({
            type: 'PrintPage:end',
          }),
          '*'
        )
      }
    },
  },
}
</script>

<style scoped></style>
